<template>
  <div class="app-container dsc-welcome cms_welcome">
    <el-scrollbar>
      <div class="cms_welcome_top">
        <div class="div cms_welcome_top_diva">
          <p class="title">系统公告信息</p>
          <ul class="cms_welcome_gg">
            <li>
              <p class="p1">系统公告名系统公告名称称</p>
              <span class="span1">已读</span>
            </li>
            <li>
              <p class="p1">系统公告系统公告名称名称</p>
              <span class="span1">已读</span>
            </li>
            <li>
              <p class="p1">系统公告系统公告名称名称</p>
              <span class="span1">已读</span>
            </li>
            <li>
              <p class="p1">系统公告系统公告名称名称</p>
              <span class="span1 no">未读</span>
            </li>
            <li>
              <p class="p1">系统公告系统公告名称名称</p>
              <span class="span1 no">未读</span>
            </li>
          </ul>
        </div>
        <div class="div cms_welcome_top_divb">
          <p class="title">微服务容量占比</p>
          <div class="cms_welcome_echar">
            <archive-chart
              id="archive-chart"
              class-name="archive-chart"
              width="100%"
              height="280px" />
          </div>
        </div>
        <div class="div cms_welcome_top_divc">
          <p class="title">系统功能信息</p>
          <div class="cms_welcome_tu">
            <ul>
              <li>
                <div class="ehcar">
                  <pretreatment-chart
                    id="pretreatment-charta"
                    class-name="pretreatment-chart"
                    width="100%"
                    height="200px" />
                </div>
                <p class="p1">模块1</p>
              </li>
              <li>
                <div class="ehcar">
                  <pretreatment-chart
                    id="pretreatment-chartb"
                    class-name="pretreatment-chart"
                    width="100%"
                    height="200px" />
                </div>
                <p class="p1">模块2</p>
              </li>
              <li>
                <div class="ehcar">
                  <pretreatment-chart
                    id="pretreatment-chartac"
                    class-name="pretreatment-chart"
                    width="100%"
                    height="200px" />
                </div>
                <p class="p1">模块3</p>
              </li>
              <li>
                <div class="ehcar">
                  <pretreatment-chart
                    id="pretreatment-chartd"
                    class-name="pretreatment-chart"
                    width="100%"
                    height="200px" />
                </div>
                <p class="p1">模块4</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cms_welcome_cent">
        <div class="div cms_welcome_cent_diva">
          <p class="title">系统用户信息</p>
          <div class="cms_welcome_cent_ul">
            <p class="p1 li">成都在职<span>385<a style="font-size:13px">人</a></span><i /></p>
            <p class="p2 li">成都在职<span>385<a style="font-size:13px">人</a></span><i /></p>
            <p class="p3 li">成都在职<span>385<a style="font-size:13px">人</a></span><i /></p>
            <p class="p4 li">成都在职<span>385<a style="font-size:13px">人</a></span><i /></p>
          </div>
        </div>
        <div class="div cms_welcome_cent_divb">
          <p class="title">系统访问量</p>
          <div class="cms_welcome_echar">
            <defect-chart
              id="defect-chart"
              class-name="defect-chart"
              width="100%"
              height="180px" />
          </div>
        </div>
        <div class="div cms_welcome_cent_divc">
          <p class="title">系统备份信息</p>
          <ul class="cms_welcome_gg cms_welcome_cent_gg">
            <li>
              <p class="p1">系统备份信息系统备份信息</p>
              <span class="span1">2020-03-01</span>
            </li>
            <li>
              <p class="p1">系统备份信息系统备份信息</p>
              <span class="span1">2020-03-01</span>
            </li>
            <li>
              <p class="p1">系统公告名称</p>
              <span class="span1">2020-03-01</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="cms_welcome_button">
        <div class="div">
          <p class="title">系统日记分析
            <!--  <el-form-item label="管辖里程：">
                        <el-input v-model="lineCo" clearable />
                    </el-form-item>-->
          </p>
          <p class="cms_welcome_button_right">
            <!--  <el-time-picker
                        is-range
                        v-model="value1"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                    </el-time-picker>-->
          </p>
          <div class="cms_welcome_echar">
            <fault-chart
              id="fault-chart"
              class-name="fault-chart"
              width="100%"
              height="327px" />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { getBasicData, getServiceData, getDefectData, getFaultData, getPretreatmentData } from '@/api/dsc/home'
import ArchiveChart from './components/welcome/ArchiveChart'
import PretreatmentChart from './components/welcome/PretreatmentChart'
import DefectChart from './components/welcome/DefectChart'
import FaultChart from './components/welcome/FaultChart'
export default {
  name: 'DscWelcome',
  components: { ArchiveChart, PretreatmentChart, DefectChart, FaultChart },
  data() {
    return {
      serviceData: {},
      basicData: {},
      defectData: {},
      faultData: {},
      pretreatmentData: {},
      lineCo: ''
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style lang="scss">
.cms_welcome{
    background-color:#ebeff2;
    overflow: auto;
    padding: 0;
    .div{
      background: #ffff;
      padding: 10px;
      border-radius: 2px;
    }
    .title{
        font-size: 16px;
        font-weight: 600;
        color: #615151;
    }
    .cms_welcome_top{
        margin-bottom:  15px;
        overflow: hidden;
        .div{
            float:left;
            min-height:325px;
        }
        .cms_welcome_top_diva{
            width:400px;
            .cms_welcome_gg{
                margin-top: 13px;
                li{
                    line-height: 44px;
                    font-size: 15px;
                    overflow: hidden;
                    margin: 0 20px;
                    .p1{
                        float: left;
                    }
                    .span1{
                        float: right;
                        color: #a6a6a6;
                        margin-right: 10%;
                    }
                    .no{
                        color: #d0d307;
                    }
                }

            }
        }
        .cms_welcome_top_divb{
            width:calc(100% - 830px);
            margin:0 15px 0;
        }
        .cms_welcome_top_divc{
            width: 400px;
            .cms_welcome_tu{
                margin-top:50px ;
                margin: 50px 5px 0;
                li{
                    width: 70px;
                    background:#ddd;
                    position: relative;
                    height: 167px;
                    float: left;
                    margin: 0 11px;
                    .p1{
                        position: absolute;
                        bottom: -20px;
                        border-radius: 100px/50px;
                        background: #084d61;
                        height: 35px;
                        width: 70px;
                        line-height: 35px;
                        color: #fff;
                        text-align: center;
                        font-size:14px;
                    }
                }
            }
        }
    }
    .cms_welcome_cent{
        overflow: hidden;
        .div{
            float:left;
            min-height:220px;
        }
        .cms_welcome_cent_diva{
            width:400px;
            .cms_welcome_cent_ul{
                padding: 10px 20px 20px 10px;
                .li{
                    float: left;
                    width: 140px;
                    font-size:13px;
                    margin: 17px 15px;
                    span{
                        font-size:36px;
                        line-height: 44px;
                        margin-left: 9px;
                        >e{
                            font-size:16px;
                        }
                    }
                    >i{
                        width: 100%;
                        height: 3px;
                        display: block;
                    }
                }
                .p1{
                    span{
                        color: #0066ff;
                    }
                    >i{
                        background: linear-gradient(-90deg, #0066ff, #121929);
                    }
                }
                .p2{
                    span{
                        color: #8ce9ae;
                    }
                    >i{
                        background: linear-gradient(-90deg, #8ce9ae, #121929);
                    }
                }
                .p3{
                    span{
                        color: #ff3300;
                    }
                    >i{
                        background: linear-gradient(-90deg, #ff3300, #121929);
                    }
                }
                .p4{
                    span{
                        color: #66ffff;
                    }
                    >i{
                        background: linear-gradient(-90deg, #66ffff, #121929);
                    }
                }
            }
        }
        .cms_welcome_cent_divb{
            width:calc(100% - 830px);
            margin:0 15px 15px;
        }
        .cms_welcome_cent_divc{
            width:400px;
            .cms_welcome_cent_gg{
                margin-top:17px;
                li{
                    line-height: 44px;
                    font-size: 15px;
                    overflow: hidden;
                    margin: 0 20px;
                    border-bottom:1px solid #e4e4e4;
                    margin-top: 10px;
                    .p1{
                        float: left;
                    }
                    .span1{
                        float: right;
                        color: #b8741a;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
    .cms_welcome_button{
        min-height:370px;
        position: relative;
        .cms_welcome_button_right{
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .cms_welcome_echar{
            width: 100%;
        }
    }
}
</style>
